<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向数据绑定</title>
</head>

<body>
    <div id="app">
        <h1>v-model 双向数据绑定</h1>
        <p>v-bind 是单向数据绑定即: 数据源的改变会影响视图但视图的改变却不会影响到数据源。</p>
        <p>而双向数据绑定则是视图与数据源中的任意一方发生改变，另一方也将同步更新。</p>
        <p>输入框: {{data.text}}</p>
        <p>单选框: {{data.radio}}</p>
        <p>复选框: {{data.checkbox}}</p>
        <p>记住密码: {{data.remeber}}</p>
        <p>下拉框: {{data.select}}</p>

        使用v-bind绑定的文本框
        <!-- 用户输入数据不会更新 -->
        <input type="text" :value="data.text" />
        <br />

        使用v-model绑定的文本框
        <!-- 用户输入数据会实时更新，绑定的是value属性(大部分情况都是) -->
        <input type="text" v-model="data.text" />
        <br />

        <p>v-model绑定单选框</p>
        <input type="radio" v-model="data.radio" value="写作">写作</input>
        <input type="radio" v-model="data.radio" value="阅读">阅读</input>

        <p>v-model绑定复选框</p>
        <input type="checkbox" v-model="data.checkbox" value="写作">写作</input>
        <input type="checkbox" v-model="data.checkbox" value="阅读">阅读</input>
        <input type="checkbox" v-model="data.checkbox" value="运动">运动</input>

        <p>v-model绑定单个复选框</p>
        <!-- 绑定的是复选框的选中状态 -->
        <input type="checkbox" v-model="data.remeber">记住密码</input>

        <p>v-model绑定下拉框</p>
        <select v-model="data.select">
            <option value="写作">写作</option>
            <option value="画画">画画</option>
            <option value="台球">台球</option>
        </select>

    </div>
    <script type="module">
        import { createApp, reactive } from '../00-dependency/vue.esm-browser.js'
        createApp({
            setup() {
                const data = reactive({
                    // 文本框
                    text: "dcsgo.com.cn",
                    // 单选框
                    radio: null,
                    // 复选框 这里必须是数组
                    checkbox: [],
                    // 单选框-记住密码
                    remeber: false,
                    // 下拉框
                    select: null
                })
                return {
                    data
                }
            }
        }).mount('#app')
    </script>
</body>

</html>